<template>
    <div  :class="isSticky?'full-width-header home8-style4 home9':'full-width-header home8-style4'">
        <header class="rs-header">
            <div class="menu-area menu-sticky">
                <div style="max-width: 1600px;margin: auto;">
                    <div class="row y-middle">
                        <div class="col-lg-2">
                            <div class="logo-cat-wrap">
                                <div class="logo-part">
                                <a href="/">
                                    <img  class="normal-logo wfls wflsfont log-img-box" v-if="isSticky" :src="logImg" alt="" srcset="">
                                    <img  class="normal-logo wfls wflsfont log-img-box" v-else :src="logImg1" alt="" srcset="">
                                    <!-- <i class="normal-logo wfls wflsfont wfls-LOGObaise" v-show="isSticky"></i> 
                                    <i class="sticky-logo wfls wflsfont wfls-LOGObaise"  v-show="!isSticky"></i> -->
                                </a></div>
                            </div>
                        </div>
                        <div class="col-lg-9 text-end">
                            <div class="rs-menu-area">
                                <div class="main-menu">
                                    <div class="mobile-menu"><a class="rs-menu-toggle rs-menu-toggle-close"><i
                                                class="fa fa-bars" @click="toggleShow"></i></a></div>
                                    <nav :class="isShow ? 'rs-menu rs-menu-close' : 'rs-menu'" style="height: 0px;">
                                        <ul class="nav-menu">
                                            <li class="menu-item-has-children" v-for="menuItem in menuItems"
                                                :key="menuItem.name" @click="toggleSubMenu(menuItem)"><a>{{
                                                    menuItem.name }}</a>
                                                <ul :class="!menuItem.isOpen ? 'sub-menu' : 'sub-menu visible'"
                                                    v-if="menuItem.children && menuItem.children.length">
                                                    <li v-for="child in menuItem.children" :key="child.name"><a
                                                            :href="child.link">{{ child.name }}</a></li>
                                                </ul>
                                                <span class="rs-menu-parent"> <i class="fa fa-angle-down"
                                                        aria-hidden="true" v-show="!menuItem.isOpen"></i>
                                                    <i class="fa fa-angle-up" aria-hidden="true"
                                                        v-show="menuItem.isOpen"></i>
                                                </span>
                                            </li>
                                        </ul>
                                    </nav>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
    </div>
</template>
<script setup>
import { ref, defineProps, onMounted, onUnmounted } from 'vue';
import logImg from '@/assets/schoolLogo.svg'
import logImg1 from '@/assets/schoolLogo1.svg'
const props = defineProps({
    isSticky: {
        type: Boolean,
        default: true
    },
    menuItemsData: {
        type: Array,
        default: []
    }
})

const menuItems = ref(props.menuItemsData);
const isShow = ref(false);
const toggleShow = () => {
    isShow.value = !isShow.value;
}
const toggleSubMenu = (menuItem) => {
    menuItems.value.forEach(item => {
        if (item !== menuItem) {
            item.isOpen = false;
        }
    });
    menuItem.isOpen = !menuItem.isOpen;
};
const handleResize = () => {
    console.log(window.innerWidth);
    if (window.innerWidth < 992) {
        isShow.value = true;
        menuItems.value.forEach(item => {
            item.isOpen = false;
        });
    } else {
        menuItems.value.forEach(item => {
            item.isOpen = false;
        });
        isShow.value = true;
    }
    // 在这里可以添加根据窗口宽度变化需要执行的逻辑
};

// 在组件挂载时添加事件监听器
onMounted(() => {
    window.addEventListener('resize', handleResize);
});

// 在组件卸载时移除事件监听器
onUnmounted(() => {
    window.removeEventListener('resize', handleResize);
});
</script>
<style scoped lang="scss">
.log-img-box{
    font-size: 50px;
    min-width: 290px;
   
    object-fit: scale-down;
}
.mobile-menu{
    position: relative;
   z-index: 9;
}
@media (min-width: 992px) {
    .log-img-box{
        height: 90px;
        max-height: 90px !important;
    }
   
}
</style>